<!DOCTYPE html>
<html>
	<head>
		<title>华为商城</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="static/css/public.css" />
		<link rel="stylesheet" type="text/css" href="static/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="static/css/elementui.css"/>
		<link rel="shortcut icon" href="favicon.ico">
		<script src="static/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/vue.js"></script>
		<script src="static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="pdetail">
			<div id="" class="top_gg">
				<a href="">
					<!-- <img src="static/image/top_gg.jpg" /> -->
				</a>
			</div>
			<div id="" class="shortcut">
				<div class="layout">
					<div class="s-sub">
						<ul>
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
									<a href="systemInfo.html">商城简介</a>
								</li>
								<!-- <li>
									<a href="">帮助中心 用户反馈</a>
								</li> -->
								<li>
									<a href="baoxiu.html">保修政策</a>
								</li>
								<li>
									<a href="problem.html">热门问题</a>
								</li>
						</ul>
					</div>
					<div class="s-right">
						<ul>
							<li>
								<a href="index.html" v-if="!userInfo">未登录</a>
								<a href="userInfo.html" v-else>{{userInfo.userName}}</a>
							</li>
							<!-- <li v-if="userInfo">
								<a href="javascript:void(0)">积分：{{userInfo.jifen}}</a>
							</li> -->
							<!--<li>
								<a href="javascript:void(0)" @click="dialogFormVisible = true">注册</a>
							</li>-->
							<li>
								<a href="javascript:void(0)" @click="isOrder">|&emsp;订单</a>
							</li>
							<li>
								<a href="javascript:void(0)" @click="car">|&emsp;购物车</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--header-->
			<div class="header">
				<div id="" class="layout">
					<div class="left">
						<div class="logo">
							<img src="static/image/logo.png" />
						</div>
						<div class="naver">
							<ul id="naver-list">
								<li id="huawei" class="">
									<a href="ry.html" target="_blank">
										<span>荣耀</span>
									</a>
								</li>
								<li id="huawei" class="">
										<a href="p.html" target="_blank">
											<span>HUAWEI P系列</span>
										</a>
									</li>
								<li id="honor" class="">
									<a href="rycw.html" target="_blank">
										<span>华为畅享系列</span>
									</a>
								</li>
								<li id="honor" class="">
									<a href="mate.html" target="_blank">
										<span>HUAWEI Mate系列</span>
									</a>
								</li>
								<li id="honor" class="">
										<a href="nova.html" target="_blank">
											<span>HUAWEI nova系列</span>
										</a>
									</li>
								<!-- <li id="huawei" class="">
									<a href="nova_4.html" target="_blank">
										<span>华为畅享系列</span>
									</a>
								</li> -->
							</ul>
						</div>
					</div>
					<!--导航右边部分-->
					<div class="right">
						<input type="text" v-model="searchVal" placeholder="荣耀10降价" class="search-text">
						<el-button class="search-btn" icon="el-icon-search" @click="onsearchVal" style="padding: 12.5px;" circle></el-button>
						<!-- <input type="submit" class="search-btn" @click="onsearchVal" value="搜索"> -->
					</div>
				</div>
			</div>
			<div id="" class="layout" style="min-height: 560px;">
				<p style="color:#666"><a href="index.html" style="color:#666"> 首页 </a> > 手机 > {{jsonData.name}} > {{jsonData.jianJie}}</p>
				<div class="">
					<div id="" class="de-con-left">
						<img :src="'sas/upload/'+jsonData.img"/>
					</div>
					<div id="" class="de-con-right">
						<p class="de-con-right-jianJie">{{jsonData.name}}&emsp;<span style="font-size: 18px;color: #999;">{{jsonData.jianJie}}</span></p>
						<div class="de-product-info">
							<p>价&ensp;&ensp;格：<span style="font-size: 24px;color: #ca141d;"><em>¥</em> {{jsonData.price}}</span></p>
							<!-- <p>限时特价： <span>限时优惠300元</span></p> -->
							<p>整点赠送：<span>10点/16点/20点下单前500赠畅玩手环A2（荣耀指定手机共享）</span></p>
							<p>整点赠送：<span>10:00前100下单送晨光开学礼包</span></p>
							<!-- <p>积分翻倍：<span>活动赠送翻倍积分，积分可抵现~</span></p> -->
						</div>
						<p>服务说明 已满48元已免运费 由华为商城负责发货，并提供售后服务</p>
						<p>商品编码 2601010038102</p>
						<div class="">
							颜色选择: &emsp;
						    <el-radio v-model="radio_color" label="宝石蓝" border>宝石蓝</el-radio>
						    <el-radio v-model="radio_color" label="香槟金" border>香槟金</el-radio>
						    <el-radio v-model="radio_color" label="幻影紫" border>幻影紫</el-radio>
						    <!-- <el-radio v-model="radio_color" label="海鸥灰" border>海鸥灰</el-radio>
						    <el-radio v-model="radio_color" label="铃兰白" border>铃兰白</el-radio> -->
						</div>
						<div class="" style="margin-top: 10px;">
							选择版本: &emsp;
						    <el-radio v-model="radio_v" label="全网通6GB+64GB" border>全网通6GB+64GB</el-radio>
						    <!-- <el-radio v-model="radio_v" label="全网通6GB+128GB" border>全网通6GB+128GB</el-radio> -->
						</div>
						<p>库存：{{jsonData.kucun}}</p>
						<div class=""style="margin-top: 10px;">
							<el-row>
							  <el-button :disabled="jsonData.kucun < 1" style="width: 25%;" @click="addCar">加入购物车</el-button>
							  <el-button :disabled="jsonData.kucun < 1" type="danger" style="width: 25%;" @click="dialog_order = true">立即下单</el-button>
							</el-row>
						</div>
					</div>
				</div>
			</div>
			<div class="phone-detail">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="手机详情" name="first">
						<div id="phoneDetail" v-html="jsonData.p_gn"></div>
					</el-tab-pane>
					<el-tab-pane label="用户评价" name="second">
						<el-input	type="textarea" :rows="2" placeholder="请输入内容" v-model="phonePj"></el-input>
						<div style="margin: 20px 0; text-align: right"><el-button type="primary" @click="savePingJia">评论</el-button></div>
						<ul>
							<li v-for="(item, index) in pingJiaData" :key="index"><span style="color:#409EFF;font-size: 16px">{{item.userName}}：</span> <span style="color:#666;font-size: 16px">{{item.pingJiaText}}</span> -------- <span style="color:#666;font-size: 12px">{{item.pingJiaDate}}</span> <span style="color: rgb(64, 158, 255);;cursor: pointer;" @click="delePingJia(item.p_id)" v-if="userInfo &&item.userName == userInfo.userName">删除</span></li>
						</ul>
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 地址弹窗 -->
			<el-dialog
				title="请先填写收货地址"
				:visible.sync="dialog_order"
				width="30%"
				>
				<el-form :model="form">
					<el-form-item label="收货地址" :label-width="form.formLabelWidth">
						<!-- <el-input v-model="form.address" autocomplete="off"></el-input> -->
						<el-select v-if="jsonAddressData.length" v-model="form.address" placeholder="请选择">
							<el-option v-for="item in jsonAddressData" :key="item.userAddress" :label="item.userAddress" :value="item.userAddress"></el-option>
						</el-select>
						<el-input v-else v-model="form.address" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="收货人" :label-width="form.formLabelWidth">
					  <el-input v-model="form.userName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" :label-width="form.formLabelWidth">
					  <el-input v-model="form.mobile" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialog_order = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisibleOrder = true;dialog_order = false">确 定</el-button>
				</span>
			</el-dialog>
			<el-dialog
				title="确认下单"
				:visible.sync="dialogVisibleOrder"
				width="30%"
				>
				<p>{{jsonData.name}} ({{jsonData.jianJie}})</p>
				<p>单价： {{jsonData.price}} ({{radio_color}}--{{radio_v}})</p>
				<p>收货地址: {{form.address}}</p>
				<p>收货人: {{form.userName}}</p>
				<p>手机号: {{form.mobile}}</p>
				<p style="color:red">实付: ￥{{jsonData.price}}</p>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisibleOrder = false">取 消</el-button>
					<el-button type="primary" @click="sure_order">确 定</el-button>
				</span>
			</el-dialog>
			<!--底部footer版权-->
			<div id="footer">
				<div class="foot">
					<!--<p class="foot_logo"><img src="static/image/flogo.png" /></p>-->
					<p class="">Designed and developed by chenwei huo.<br /> Copyright © 2010-2019 chenwei.com. All Rights Reserved.</p>
					<p class=""></p>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 注册
		Vue.component('my-component', {});
		var WEITUOSERVER = new Vue({
			el: '#pdetail',
			data: {
				activeName: 'first',
				dialogVisibleOrder:false,
				phonePj:"",
				pingJiaData:[],
				jsonData: {},
				dialog_order:false, //下单弹窗
				searchVal:"", // 搜索
				jsonAddressData:[],
				jsonuserAddressData:[],
				form:{address:"河南省郑州市二七区",formLabelWidth:"120px",userName:"",mobile:""},
				dialogTableVisible: false,
        		dialogFormVisible: false,
        		pid:"",
        		radio_color:"宝石蓝",
        		radio_v:"全网通6GB+64GB",
        		userInfo: window.sessionStorage.user && JSON.parse(window.sessionStorage.user),
			},
			created() {
				this.pid = this.GetQueryString("id");
				this.gatData();
				this.gatAddressData();
				this.getPingJia();
			},
			methods: {
				handleClick(tab, event) {
							// console.log(tab, event);
					},
				savePingJia(){
					var that = this;
						var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
						if(!user){
							that.$message({
								message: '请先登录',
								type: 'warning'
							});
								return;
						}
						$.ajax({
								type: "GET",
										url: "php/pingJia.php",
										data: {"userName":that.userInfo.userName,"pingJiaText":that.phonePj,"pingJiaDate":new Date(),"productId":that.pid,"add":"add","p_id":that.uuid()},
										dataType: "json",
								success: function(res) {
									that.$message({
										message: '评论成功',
										type: 'success'
									});
									that.phonePj = "";
									that.getPingJia();
								},
						});
				},
				delePingJia(id){
					debugger
					var that = this;
					$.ajax({
								type: "GET",
										url: "php/pingJia.php",
										data: {"p_id":id,"depj":"depj"},
										dataType: "json",
								success: function(res) {
									that.$message({
										message: '删除成功',
										type: 'success'
									});
									that.phonePj = "";
									that.getPingJia();
								},
						});
				},
				getPingJia(){
					var that = this;
					// var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
					// 	if(!user){
					// 			return;
					// 	}
						$.ajax({
								type: "GET",
										url: "php/pingJia.php",
										data: {"productId":that.pid,"search":"search"},
										dataType: "json",
								success: function(res) {
									that.pingJiaData = res.data;
									that.pingJiaData.forEach(element => {
										var date = new Date(element.pingJiaDate);  
										element.pingJiaDate=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
									});
								},
						});
				},
				gatAddressData(){
						var that = this;
						var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
						if(!user){
								return;
						}
						$.ajax({
								type: "GET",
										url: "php/detail.php",
										data: {"userId":user.userId,"getAddressdata":"getAddressdata"},
										dataType: "json",
								success: function(res) {
										that.jsonAddressData = res.data;
										if(!res.data.length) return;
										that.form.address = res.data[0].userAddress ? res.data[0].userAddress : "河南省郑州市二七区";
										that.form.userName = res.data[0].getUserName ? res.data[0].getUserName : "";
										that.form.mobile = res.data[0].userPhone ? res.data[0].userPhone : "";
								},
						});
				},
				gatData() {
					var that = this;
					$.ajax({
						type: "GET",
			             url: "php/detail.php",
			             data: {"pid":that.pid,"getdata":"pro_detail"},
			             dataType: "json",
						success: function(res) {
							that.jsonData = res.data[0];
						},
					});
				},
				GetQueryString(name){
				     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
				     var r = window.location.search.substr(1).match(reg);
				     if(r!=null)return  unescape(r[2]); return null;
				},
				// 确定下单
				sure_order(){
					if(!(this.form.address&&this.form.mobile&&this.form.userName)){
						this.$message({
							message: '请填写完整信息',
							type: 'warning'
						});
						return;
					}
					this.dialog_order = false;
					this.order();
				},
				addCar() {
					var that = this;
					var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
					if(!!user){
						var that = this;
						$.ajax({
							type: "GET",
				             url: "php/detail.php",
				             data: {"pid":that.pid,"userId":user.userId,"p_class":that.jsonData.p_class,"name":that.jsonData.name,"price":that.jsonData.price,"img":that.jsonData.img,"jianJie":that.jsonData.jianJie,"p_color":that.radio_color,"p_version":that.radio_v},
				             dataType: "json",
							success: function(res) {
								if(res.resultCode == 200){
									that.$message({
							          message: '恭喜你，添加成功',
							          type: 'success'
							       });
								}else if(res.resultCode == "00"){
									that.$message({
							          message: '请不要重复添加',
							          type: 'warning'
							       });
								}
							},
							error:function(data){
								that.$message({
						          message: '添加失败',
						          type: 'success'
						        });
							}
						});
					}else{
						this.$message({
				          message: '请先登录',
				          type: 'warning'
				        });
					}
				},
				car(){
					if(window.sessionStorage.user){
						window.location.href = "car.html"
					}else{
						this.$message({
				          message: '请先登录',
				          type: 'warning'
				        });
					}
				},
				isOrder(){
					if(window.sessionStorage.user){
						window.location.href = "order.html"
					}else{
						this.$message({
				          message: '请先登录',
				          type: 'warning'
				        });
					}
				},
				
				order(){
					var that = this;
					var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
					if(!!user){
						var that = this;
						var orderDate=this.formatDate(new Date()); 
						$.ajax({
							type: "GET",
				             url: "php/detail.php",
				             data: {"pid":that.pid,"userId":user.userId,"p_class":that.jsonData.p_class,"p_name":that.jsonData.name,"price":that.jsonData.price,"img":that.jsonData.img,"jianJie":that.jsonData.jianJie,"my_address":that.form.address,"user_name":that.form.userName,"user_mobile":that.form.mobile,"p_color":that.radio_color,"p_version":that.radio_v,"orderDate":orderDate,"orderCode":Date.parse(new Date()),"shifu":that.jsonData.price,"userName":user.userName},
				             dataType: "json",
							success: function(res) {
								if(res.resultCode == 200){
									that.$message({
							          message: '恭喜你，下单成功',
							          type: 'success'
							       });
									// that.jiFen();
									that.dialogVisibleOrder = false;
									that.sales(that.pid);
								}else if(res.resultCode == "00"){
									that.$message({
							          message: '请不要重复下单',
							          type: 'warning'
							       });
								}
							},
							error:function(data){
								that.$message({
						          message: '下单失败',
						          type: 'success'
						        });
							}
						});
					}else{
						this.$message({
				          message: '请先登录',
				          type: 'warning'
				        });
					}
				},
				jiFen(){
					var that = this;
					var user = window.sessionStorage.user ? JSON.parse(window.sessionStorage.user) :"";
					if(!user){
						return;
					}
					$.ajax({
							type: "GET",
							url: "php/detail.php",
							data: {"userId":user.userId,"addJifen":"addJifen"},
							dataType: "json",
							success: function(res) {
								if(res.resultCode == 200){
									if(window.sessionStorage.user){
										user.jifen = res.data;
										window.sessionStorage.user = JSON.stringify(user);
									}
									// that.$message({
									// 		message: '积分增加成功',
									// 		type: 'success'
									// 	});
								}
							},
							error:function(data){
								
							}
						});
				},
				sales(productId){
					$.ajax({
							type: "GET",
							url: "php/detail.php",
							data: {"productId":productId,"addsales":"addsales"},
							dataType: "json",
							success: function(res) {
								if(res.resultCode == 200){
									console.log("销量增加成功")
								}
							},
							error:function(data){
								
							}
						});
				},
				formatDate(now) { 
					var year=now.getFullYear(); 
					var month=now.getMonth()+1; 
					var date=now.getDate(); 
					var hour=now.getHours(); 
					var minute=now.getMinutes(); 
					var second=now.getSeconds(); 
					// return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
					return year+"-"+month+"-"+date+" "+hour+":"+minute; 
				},
				// 搜索
				onsearchVal(){
					var arg = encodeURI(encodeURI(this.searchVal));
					window.location.href = "index_search.html?arg="+arg;
					// var that = this;
					// $.ajax({
					// 	type: "GET",
			    //          url: "php/login.php",
			    //          data: {"searchVal":that.searchVal,"searchName":"searchName"},
			    //          dataType: "json",
					// 	success: function(res) {
					// 		that.jsonData = res.data;
					// 	},
					// });
				},
				//uuid
				uuid () {
				function _s4(){
						return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
					}
				return _s4() + _s4() + '-' + _s4() + '-' + _s4() + '-' + _s4() + '-' + _s4() + _s4() + _s4();
				},
			}
		})
	</script>
	
</html>
